<template>
  <!-- 渲染组件 -->
  <component v-if="currentComp" :is="currentComp" v-bind:data="props.data" />
</template>
<script lang="ts" setup>
import type { Component } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
import {ref, shallowRef, onMounted, watch } from 'vue';
import { componentMap } from './componentMap'
import { propTypes } from '/@/utils/propTypes';

const { notification } = useMessage();
const currentComp = shallowRef<Component>()
const props = defineProps({
  // 业务类型
  bizType: propTypes.any,
  data: propTypes.object.def({})
});
onMounted(() => {

})

watch(
  () => props.bizType,
  (bizType) => {
    if (bizType) {
      const comp = componentMap.get(bizType)
      console.log('bizType: ', bizType, 'comp', comp);
        
      if (!comp) {
        notification.error({
          message: '渲染失败',
          description: `尚未注册组件, 业务类型: ${bizType}`
        })
        return
      }

      currentComp.value = comp
    }
  },
  { immediate: true }
);
</script>

<style>


</style>